<!DOCTYPE html>
{% extends "tools/base_tool.html" %}

{% block extra_head %}
<link rel="stylesheet" href="/static/css/video-downloader.css">
{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="card">
        <div class="card-body">
            <h5 class="card-title"><i data-feather="video"></i> 网页视频下载</h5>
            <ul class="nav nav-tabs mb-3" id="videoSourceTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="universal-tab" data-bs-toggle="tab" data-bs-target="#universal-content" type="button" role="tab" aria-controls="universal-content" aria-selected="true">通用视频下载</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="youtube-tab" data-bs-toggle="tab" data-bs-target="#youtube-content" type="button" role="tab" aria-controls="youtube-content" aria-selected="false">YouTube</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="bilibili-tab" data-bs-toggle="tab" data-bs-target="#bilibili-content" type="button" role="tab" aria-controls="bilibili-content" aria-selected="false">Bilibili</button>
                </li>
            </ul>
            <div class="tab-content" id="videoSourceTabContent">
                <div class="tab-pane fade show active" id="universal-content" role="tabpanel" aria-labelledby="universal-tab">
                    <div class="input-group mb-3">
                        <input type="text" class="form-control" placeholder="输入网页URL" id="pageUrl">
                        <button class="btn btn-primary" type="button" id="analyzeBtn">
                            <i data-feather="search"></i> 解析链接
                        </button>
                    </div>
                    <div class="alert alert-info small">
                        <i data-feather="info"></i> 提示：
                        <ul class="mb-0">
                            <li>输入网页URL可以自动检测并解析页面中的所有媒体资源</li>
                            <li>支持视频、音频等多种媒体格式，包括M3U8、MP4、WebM等</li>
                            <li>检测到的媒体将直接下载到您的本地设备，而非服务器</li>
                        </ul>
                    </div>
                    
                    <!-- 媒体资源列表 -->
                    <div id="mediaResourcesContainer" class="mt-4 d-none">
                        <h6 class="mb-3">检测到的媒体资源：</h6>
                        <div class="mb-3">
                            <div class="input-group input-group-sm">
                                <span class="input-group-text">筛选</span>
                                <input type="text" class="form-control" id="mediaFilter" placeholder="输入关键词筛选媒体">
                                <button class="btn btn-outline-secondary" type="button" id="clearFilterBtn">清除</button>
                            </div>
                        </div>
                        <div id="mediaList" class="media-list"></div>
                    </div>
                </div>
                <div class="tab-pane fade" id="youtube-content" role="tabpanel" aria-labelledby="youtube-tab">
                    <div class="input-group mb-3">
                        <input type="text" class="form-control" placeholder="输入YouTube视频URL" id="youtubeUrl">
                        <button class="btn btn-danger" type="button" id="youtubeDownloadBtn">
                            <i data-feather="youtube"></i> 下载视频
                        </button>
                    </div>
                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" id="youtubeWithSubtitles" checked>
                        <label class="form-check-label" for="youtubeWithSubtitles">下载字幕</label>
                    </div>
                </div>
                <div class="tab-pane fade" id="bilibili-content" role="tabpanel" aria-labelledby="bilibili-tab">
                    <div class="input-group mb-3">
                        <input type="text" class="form-control" placeholder="输入Bilibili视频URL" id="bilibiliUrl">
                        <button class="btn btn-info" type="button" id="bilibiliDownloadBtn">
                            <i data-feather="video"></i> 下载视频
                        </button>
                    </div>
                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" id="bilibiliWithDanmaku" checked>
                        <label class="form-check-label" for="bilibiliWithDanmaku">下载弹幕</label>
                    </div>
                    <div class="card mb-3">
                        <div class="card-header bg-light">
                            <h6 class="mb-0">B站账号登录（用于下载高清视频）</h6>
                        </div>
                        <div class="card-body">
                            <p class="text-muted small">B站需要登录才能下载720p及以上格式视频，请上传cookies文件</p>
                            <form id="cookiesUploadForm" enctype="multipart/form-data">
                                <div class="input-group">
                                    <input type="file" class="form-control" id="cookiesFile" name="file" accept=".txt">
                                    <button class="btn btn-primary" type="button" id="uploadCookiesBtn">
                                        <i data-feather="upload"></i> 上传
                                    </button>
                                </div>
                                <div class="form-text mt-2">
                                    <a href="#" data-bs-toggle="modal" data-bs-target="#cookiesHelpModal">如何获取B站cookies?</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div id="resultArea" class="mt-3 hidden">
                <div class="alert alert-primary hidden" id="loadingIndicator">
                    <div class="spinner-border spinner-border-sm" role="status">
                        <span class="visually-hidden">加载中...</span>
                    </div>
                    <span class="loading-text">正在分析媒体资源，请稍候...</span>
                </div>
                <div id="errorAlert" class="alert alert-danger hidden"></div>
                <div id="successAlert" class="alert alert-success hidden"></div>
            </div>
            <div class="alert alert-info mt-3">
                <i data-feather="info"></i>
                <strong>使用说明：</strong>
                <ul class="mb-0">
                    <li>通用视频下载：输入网页URL自动解析媒体资源（支持当前页面检测）</li>
                    <li>YouTube：输入视频链接，可选择是否下载字幕</li>
                    <li>Bilibili：输入视频链接，需要登录才能下载高清视频</li>
                </ul>
            </div>
            <div class="alert alert-warning mt-3">
                <i data-feather="alert-triangle"></i>
                <strong>常见问题：</strong>
                <ul class="mb-0">
                    <li>如果点击按钮无响应，请尝试 <button class="btn btn-sm btn-outline-secondary" onclick="debugButtonStatus()">修复按钮</button> 或刷新页面</li>
                    <li>下载B站高清视频需要上传cookies文件</li>
                    <li>如果解析失败，可能是视频源不支持或需要更新you-get模块</li>
                    <li>智能识别输入内容：URL执行网页解析，非URL执行当前页面检测</li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/video-downloader.js"></script>
{% endblock %}

<!-- Cookies帮助模态框 -->
<div class="modal fade" id="cookiesHelpModal" tabindex="-1" aria-labelledby="cookiesHelpModalLabel" aria-hidden="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="cookiesHelpModalLabel">如何获取B站cookies</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info">
                    <i data-feather="info"></i> B站需要登录才能下载720p及以上格式视频，请按照以下步骤获取cookies
                </div>
                
                <h6>方法一：使用浏览器开发者工具</h6>
                <ol>
                    <li>使用Chrome或Edge浏览器登录B站账号</li>
                    <li>按F12打开开发者工具，切换到"网络"(Network)选项卡</li>
                    <li>刷新页面，在网络请求列表中找到任意一个B站的请求</li>
                    <li>点击该请求，在右侧找到"Cookie"请求头</li>
                    <li>复制Cookie的完整内容（通常很长）</li>
                    <li>将复制的内容粘贴到一个文本文件中，保存为.txt格式</li>
                    <li>上传该文件即可</li>
                </ol>
                
                <h6 class="mt-3">方法二：使用浏览器扩展</h6>
                <ol>
                    <li>安装"Cookie Editor"或类似的浏览器扩展</li>
                    <li>登录B站账号</li>
                    <li>点击扩展图标，选择"导出"或"Export"选项</li>
                    <li>将导出的内容保存为文本文件</li>
                    <li>上传该文件即可</li>
                </ol>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>